<template>
  <!-- 基本信息 -->
  <el-form
    label-width="auto"
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    class="demo-ruleForm"
  >
    <el-row type="flex" justify="center" :gutter="0">
      <el-col :span="12">
        <el-form-item label="填报单位：" prop="reportInOrgName">
          <el-input
            disabled
            v-model="ruleForm.reportInOrgName"
            v-if="$route.query.status !== '查看'"
          ></el-input>
          <span v-else>{{ ruleForm.reportInOrgName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12" :offset="4">
        <el-form-item label="供应商：" prop="supplier">
          <el-input
            disabled
            v-model="ruleForm.supplier"
            v-if="$route.query.status !== '查看'"
          ></el-input>
          <span v-else>{{ ruleForm.supplier }}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center" :gutter="0">
      <el-col :span="12">
        <el-form-item label="验收单编号：">
          <el-input
            disabled
            v-model="ruleForm.acceptanceNumber"
            v-if="$route.query.status !== '查看'"
          ></el-input>
          <span v-else>{{ ruleForm.acceptanceNumber }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12" :offset="4">
        <el-form-item label="验收单名称：" prop="acceptanceName">
          <el-input
            :disabled="$route.query.status === '查看'"
            v-model="ruleForm.acceptanceName"
            maxlength="300"
            show-word-limit
            v-if="$route.query.status !== '查看'"
            @blur="handleTrim('acceptanceName')"
          ></el-input>
          <span v-else :title="ruleForm.contractName" class="overflow">{{
            ruleForm.acceptanceName
          }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center" :gutter="0">
      <el-col :span="12" class="relative">
        <el-form-item label="合同编号：" prop="contractNumber">
          <el-input
            disabled
            v-model="ruleForm.contractNumber"
            v-if="$route.query.status !== '查看'"
          ></el-input>
          <span v-else>{{ ruleForm.contractNumber }}</span>
          <el-button
            type="single-number"
            v-if="$route.query.status === '新增'"
            class="chereay"
            @click="contractvsabled = true"
            >选择</el-button
          >
        </el-form-item>
      </el-col>
      <el-col :span="12" :offset="4">
        <el-form-item label="合同名称：" prop="contractName">
          <el-input
            disabled
            v-model="ruleForm.contractName"
            v-if="$route.query.status !== '查看'"
          ></el-input>
          <span v-else>{{ ruleForm.contractName }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center" :gutter="0">
      <el-col :span="12">
        <el-form-item label="供应商联系电话：">
          <el-input
            disabled
            v-model="ruleForm.supplierPhone"
            v-if="$route.query.status !== '查看'"
          ></el-input>
          <span v-else>{{ ruleForm.supplierPhone }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12" :offset="4">
        <el-form-item label="车牌号：" prop="plateNumber">
          <el-input
            v-model="ruleForm.plateNumber"
            maxlength="10"
            show-word-limit
            v-if="$route.query.status !== '查看'"
            @blur="handleTrim('plateNumber')"
          ></el-input>
          <span v-else>{{ ruleForm.plateNumber }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center" :gutter="0">
      <el-col :span="12">
        <el-form-item label="司机姓名：" prop="driverName">
          <el-input
            :disabled="$route.query.status === '查看'"
            v-model="ruleForm.driverName"
            maxlength="50"
            show-word-limit
            v-if="$route.query.status !== '查看'"
            @blur="handleTrim('driverName')"
          ></el-input>
          <span v-else>{{ ruleForm.driverName }}</span>
        </el-form-item>
      </el-col>

      <el-col :span="12" :offset="4">
        <el-form-item label="司机手机号：" prop="driverPhone">
          <el-input
            v-model="ruleForm.driverPhone"
            maxlength="11"
            show-word-limit
            v-if="$route.query.status !== '查看'"
          ></el-input>
          <span v-else>{{ ruleForm.driverPhone }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center" :gutter="0">
      <el-col :span="12">
        <el-form-item label="验收人：" prop="acceptor">
          <el-input
            v-model="ruleForm.acceptor"
            maxlength="50"
            show-word-limit
            v-if="$route.query.status !== '查看'"
            @blur="handleTrim('acceptor')"
          ></el-input>
          <span v-else>{{ ruleForm.acceptor }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12" :offset="4">
        <el-form-item label="验收人联系电话：" prop="acceptancePhone">
          <el-input
            v-model="ruleForm.acceptancePhone"
            maxlength="11"
            show-word-limit
            v-if="$route.query.status !== '查看'"
          ></el-input>
          <span v-else>{{ ruleForm.acceptancePhone }}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="0">
      <el-col :span="10">
        <el-form-item label="编制日期：" prop="compileDate">
          <el-date-picker
            disabled
            type="date"
            placeholder="选择日期"
            v-model="ruleForm.compileDate"
            style="width: 100%"
            v-if="$route.query.status !== '查看'"
          ></el-date-picker>
          <span v-else>{{ formatDate(ruleForm.compileDate) }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="10" :offset="4">
        <el-form-item label="编制人：" prop="compilePeople">
          <el-input
            disabled
            v-model="ruleForm.compilePeople"
            v-if="$route.query.status !== '查看'"
          ></el-input>
          <span v-else>{{ ruleForm.compilePeople }}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="备注：" prop="remake">
      <el-input
        type="textarea"
        v-model="ruleForm.remake"
        maxlength="1000"
        show-word-limit
        v-if="$route.query.status !== '查看'"
        @blur="handleTrim('remake')"
      ></el-input>
      <span v-else>{{ ruleForm.remake }}</span>
    </el-form-item>
    <el-form-item label="品牌星级：" prop="brandStar">
      <el-rate
        v-model="ruleForm.brandStar"
        style="margin-top: 6px"
        :disabled="$route.query.status == '查看'"
      ></el-rate>
    </el-form-item>
    <el-form-item label="品牌评价说明：" prop="brandState">
      <el-input
        maxlength="1000"
        show-word-limit
        type="textarea"
        v-model="ruleForm.brandState"
        v-if="$route.query.status !== '查看'"
        @blur="handleTrim('brandState')"
      ></el-input>
      <span v-else>{{ ruleForm.brandState }}</span>
    </el-form-item>
    <el-form-item label="外观质量星级：" prop="appearanceStar">
      <el-rate
        :disabled="$route.query.status == '查看'"
        v-model="ruleForm.appearanceStar"
        style="margin-top: 6px"
      ></el-rate>
    </el-form-item>
    <el-form-item label="外观质量说明：" prop="appearanceState">
      <el-input
        v-if="$route.query.status !== '查看'"
        v-model="ruleForm.appearanceState"
        type="textarea"
        maxlength="1000"
        show-word-limit
        @blur="handleTrim('appearanceState')"
      ></el-input>
      <span v-else>{{ ruleForm.appearanceState }}</span>
    </el-form-item>
    <el-form-item label="数量星级：" prop="numberStar">
      <el-rate
        :disabled="$route.query.status == '查看'"
        v-model="ruleForm.numberStar"
        style="margin-top: 6px"
      ></el-rate>
    </el-form-item>
    <el-form-item label="数量评价说明：" prop="numberState">
      <el-input
        v-if="$route.query.status !== '查看'"
        maxlength="1000"
        show-word-limit
        type="textarea"
        v-model="ruleForm.numberState"
        @blur="handleTrim('numberState')"
      ></el-input>
      <span v-else>{{ ruleForm.numberState }}</span>
    </el-form-item>
    <el-form-item label="物流评价星级：" prop="logisticsEvaluationStar">
      <el-rate
        :disabled="$route.query.status == '查看'"
        v-model="ruleForm.logisticsEvaluationStar"
        style="margin-top: 6px"
      ></el-rate>
    </el-form-item>
    <el-form-item label="物流评价说明：" prop="logisticsEvaluationState">
      <el-input
        v-if="$route.query.status !== '查看'"
        maxlength="1000"
        show-word-limit
        type="textarea"
        v-model="ruleForm.logisticsEvaluationState"
        @blur="handleTrim('logisticsEvaluationState')"
      ></el-input>
      <span v-else>{{ ruleForm.logisticsEvaluationState }}</span>
    </el-form-item>
    <el-form-item label="物流现场配合度星级：" prop="logisticsCoordinationStar">
      <el-rate
        :disabled="$route.query.status == '查看'"
        v-model="ruleForm.logisticsCoordinationStar"
        style="margin-top: 6px"
      ></el-rate>
    </el-form-item>
    <el-form-item
      label="物流现场配合度说明："
      prop="logisticsCoordinationState"
    >
      <el-input
        v-if="$route.query.status !== '查看'"
        maxlength="1000"
        show-word-limit
        type="textarea"
        v-model="ruleForm.logisticsCoordinationState"
        @blur="handleTrim('logisticsCoordinationState')"
      ></el-input>
      <span v-else>{{ ruleForm.logisticsCoordinationState }}</span>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    fromData: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  watch: {
    fromData: {
      handler(n) {
        if (Object.values(n).length > 0) {
          this.ruleForm = n;
        }
      },
      immediate: true
    }
  },
  data() {
    const Mobile = (rule, value, callback) => {
      var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (value) {
        if (value.match(myreg)) {
          callback();
        } else {
          this.$showErrorMessage("请输入正确的手机号");
          callback(new Error(rule.message || "请输入正确的手机号"));
        }
      } else {
        callback();
      }
    };
    const tbdw = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("填报单位不能为空"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {},
      rules: {
        // 验收人
        acceptor: [
          { required: true, message: "编制人不能为空", trigger: "blur" }
        ],
        // 编制人
        compilePeople: [
          { required: true, message: "编制人不能为空", trigger: "blur" }
        ],
        // 编制日期
        compileDate: [
          { required: true, message: "编制日期不能为空", trigger: "blur" }
        ],
        // 供应商
        supplier: [
          { required: true, message: "供应商不能为空", trigger: "blur" }
        ],
        // 填报单位
        reportInOrgName: [
          { required: true, validator: tbdw, trigger: "change" }
        ],
        // 验收单编号表单验证
        acceptanceNumber: [
          { required: true, message: "验收单编号不能为空", trigger: "blur" }
        ],
        // 验收单名称
        acceptanceName: [
          { required: true, message: "验收单名称不能为空", trigger: "blur" }
        ],
        // 合同编号
        contractNumber: [
          { required: true, message: "合同编号不能为空", trigger: "blur" }
        ],
        // 物流评价星级不能为空
        logisticsEvaluationStar: [
          { required: true, message: "物流评价星级不能为空", trigger: "change" }
        ],
        logisticsCoordinationStar: [
          {
            required: true,
            message: "物流现场配合度星级不能为空",
            trigger: "change"
          }
        ],
        // 司机手机号
        driverPhone: [
          {
            validator: Mobile,
            trigger: "blur"
          }
        ],
        // 供应商联系电话
        supplierPhone: [
          {
            validator: Mobile,
            trigger: "blur"
          }
        ],
        // 验收人联系电话
        acceptancePhone: [
          {
            required: true,
            message: "验收人联系电话不能为空",
            trigger: "blur"
          },
          {
            required: true,
            validator: Mobile,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    // 日期格式转换
    formatDate(date) {
      // date = new Date();
      date = new Date(date); //转换成Data();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
    // 清空名称空格
    handleTrim(key) {
      this.$set(
        this.ruleForm,
        key,
        this.ruleForm[key].replace(/(^\s*)|(\s*)$/g, "")
      );
    }
  }
};
</script>

<style lang="scss">
.demo-ruleForm {
  width: 80%;
  margin: 20px 0 0 50px;
}

.overflow {
  display: inline-block;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
